<template>
  <div class="disc">
    <div class="hongbao_con">
      <div class="hongbao_totle">
        <p>有<span class="num">3</span>个红包即将到期</p>
        <p>
          <i class="iconfont icon-wenhao"></i>
          <span class="shuoming">红包说明</span>
        </p>
      </div>

      <ul>
        <li v-for="(item,index) in list"
            :key="index">
          <div class="list_item">
            <div class="ll">
              <span>￥</span>
              <span class="jine">{{list[index].amount}}</span>
              <p>满{{list[index].sum_condition}}元可用</p>
            </div>
            <div class="lr">
              <h4>{{list[index].name}}</h4>
              <p>{{list[index].end_date}}到期</p>
              <p>限收货手机号为{{list[index].phone}}</p>
            </div>
            <div class="tr">{{list[index].description_map.validity_delta}}</div>
          </div>
        </li>
        <div class="list_foot">
          <p>{{list[2].limit_map.restaurant_flavor_ids}}</p>
        </div>
      </ul>
    </div>
    <div class="history"
         @click="overAction">
      <p>查看历史红包 ></p>
    </div>
    <div class="foot">
      <span @click="duihuanAction">兑换红包</span>
      <span @click="recommendAction">推荐有奖</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Dis',
  data: function () {
    return {
      list: []
    }
  },
  created () {
    this.$axios.get('https://elm.cangdu.org/promotion/v2/users/59869/hongbaos', {
      params: {
        limit: 20,
        offset: 0
      }
    }).then(res => {
      console.log(res)
      this.list = res.data;
      console.log(this.list);
    }).catch(err => console.log(err))
  },
  methods: {
    //过期红包
    overAction () {
      this.$router.push({ name: 'Over' })
    },
    //兑换红包
    duihuanAction () {
      this.$router.push({ name: "DuiHuan" })
    },
    //推荐有奖
    recommendAction () {
      this.$router.push({ name: "Recommend" })
    }
  },
}
</script>

<style lang="less">
.disc {
  .hongbao_con {
    padding: 0 15px;

    .hongbao_totle {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 46px;
      p {
        font-size: 12px;
        color: #666;
        .num {
          color: #ff5340;
        }
        .iconfont,
        .shuoming {
          color: #3190e8;
        }
      }
    }

    ul {
      li {
        background-color: white;
        border-radius: 10px;
        border-top: 5px solid #ff5340;
        margin-bottom: 10px;
        .list_item {
          display: flex;
          justify-content: space-between;
          padding: 23px 12px 18.75px;

          .ll {
            padding-right: 10px;
            box-sizing: border-box;
            border-right: 0.1px solid #ccc;
            span {
              font-size: 17px;
              color: #ff5340;
            }
            .jine {
              font-size: 35px;
            }
            p {
              font-size: 12px;
              color: #999;
            }
          }
          .lr {
            h4 {
              font-size: 16px;
              color: #666;
              font-weight: normal;
            }
            p {
              font-size: 12px;
              color: #999;
            }
          }
          .tr {
            font-size: 17px;
            color: #ff5340;
          }
        }
      }
      .list_foot {
        font-size: 12px;
        color: #999;
        background-color: #f9f9f9;
        padding: 10px;
      }
    }
  }
  .history {
    text-align: center;
    font-size: 12px;
    color: #999;
    margin-top: 20px;
  }
  .foot {
    padding: 0;
    height: 44px;
    background-color: white;
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    span {
      display: inline-block;
      width: 49%;
      font-size: 16px;
      color: #555;
      text-align: center;
      border-right: 0.1px solid rgb(245, 245, 245);
    }
  }
}
</style>